import React, { memo, useMemo } from 'react'

interface IProps {
  onClick:()=>void
}

/**
 * 传入B的props有改变
 * 每次点击按钮,调用setCount,触发了A组件的state的刷新,变量handle会被重新定义一次,由于是钱比较,因此react认为props有更新
 * 所以这里的memo无效
 * useMemo正是用于解决这个问题:
 *   把“创建”函数和依赖项数组作为参数传入useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。
 * 这种优化有助于避免在每次渲染时都进行高开销的计算
 * useMemo的用法和useEffect的用法类似，它需要接收两个参数:
 *   第一个参数要求为一个function，function需要return一个变量
 *   第二个参数为一个数组，和useEffect类似，作为第一个参数的依赖项数组
 * 在检测到依赖项数组中的变量发生变化时，重新执行传入的function，并返回传入function执行后的结果
 */
export const B:React.FC<IProps> = memo((props):JSX.Element=>{
  const {onClick} = props
  const handle = ():void=>{
    onClick && onClick()
  }

  console.log("B update");
  
  return (
    <button onClick={handle}>click B!</button>
  )
})

